








// // 为自定义的选项 'myOption' 注入一个处理器。 
// Vue.mixin({
//   created: function () {
//     var myOption = this.$options.myOption1
//     if (myOption) {
//       console.log(myOption)
//     }
//   }
// })

// new Vue({
//   myOption1: 'hello!'
// })
// // -> "hello!"












// var mixin = {
//   methods: {
//     foo: function () {
//       console.log('foo')
//     },
//     conflicting: function () {
//       console.log('from mixin')
//     }
//   }
// }

// var vm = new Vue({
//   mixins: [mixin],
//   methods: {
//     bar: function () {
//       console.log('bar')
//     },
//     conflicting: function () {
//       console.log('from self')
//     }
//   }
// })

// vm.foo() // -> "foo"
// vm.bar() // -> "bar"
// vm.conflicting() // -> "from self"










// var mixin = {
//   created: function () {
//     console.log('混合对象的钩子被调用')
//   }
// }

// new Vue({
//   mixins: [mixin],
//   created: function () {
//     console.log('组件钩子被调用')
//   }
// })


// // 定义一个混合对象
// var myMixin = {
//   created: function () {
//     this.hello()
//   },
//   methods: {
//     hello: function () {
//       console.log('hello from mixin!')
//     }
//   }
// }

// // 定义一个使用混合对象的组件
// var Component = Vue.extend({
//   mixins: [myMixin]
// })

// var component = new Component() // -> "hello from mixin!"





// Vue.directive('demo2', function (el, binding) {

//   console.log(binding);
//   console.log(binding.value);

//   el.style.backgroundColor = binding.value.color;
// })

// new Vue({
//   el: '#hook-arguments-example',
//   data: {
//     message: 'hello!'
//   }
// })





// Vue.directive('demo', {
//   bind: function (el, binding, vnode) {
//     var s = JSON.stringify;
//     console.log(s);
//     el.innerHTML =
//       'name: '       + s(binding.name) + '<br>' +
//       'value: '      + s(binding.value) + '<br>' +
//       'expression: ' + s(binding.expression) + '<br>' +
//       'argument: '   + s(binding.arg) + '<br>' +
//       'modifiers: '  + s(binding.modifiers) + '<br>' +
//       'vnode keys: ' + Object.keys(vnode).join(', ')
//   }
// })


// new Vue({
//   el: '#hook-arguments-example',
//   data: {
//     message: 'hello!'
//   }
// })




// // 注册一个全局自定义指令 v-focus
// Vue.directive('focus', {
//   // 当绑定元素插入到 DOM 中。
//   inserted: function (el) {
//     console.log(el);
//     // 聚焦元素
//     el.focus()
//   }
// })


// var getChildrenTextContent = function (children) {
//   return children.map(function (node) {
//     return node.children
//       ? getChildrenTextContent(node.children)
//       : node.text
//   }).join('')
// }




// Vue.component('anchored-heading', {
//   render: function (createElement) {
//     // create kebabCase id
//     var headingId = getChildrenTextContent(this.$slots.default)
//       .toLowerCase()
//       .replace(/\W+/g, '-')
//       .replace(/(^\-|\-$)/g, '')

//     return createElement(
//       'h' + this.level,
//       [
//         createElement('a', {
//           attrs: {
//             name: headingId,
//             href: '#' + headingId
//           }
//         }, this.$slots.default)
//       ]
//     )
//   },
//   props: {
//     level: {
//       type: Number,
//       required: true
//     }
//   }
// })



// Vue.component('anchored', {

//     render: function (createElement) {
//         // if (this.items.length) {
//         //     return createElement('ul', this.items.map(function (item) {
//         //         return createElement('li', item.name)
//         //   }))
//         // } else {
//         //     return createElement('p', 'No items found.')
//         // }
//         console.log(this.items);
//         return createElement('h1', 'No items found.');

//     }

// })



// new Vue({
//   el: '#demo',
//   data: {
//     items: [
//         {
//             name: '1'
//         },
//         {
//             name: '1'
//         },
//         {
//             name: '1'
//         },
//         {
//             name: '1'
//         }
//     ]
//   },
//   // directives: {
//   //   focus1: {
//   //     // 指令的定义---
//   //     // 当绑定元素插入到 DOM 中。
//   //     inserted: function (el) {
//   //       // 聚焦元素
//   //       el.focus()
//   //     }
//   //   }
//   // }
// })
// Vue.component('anchored-heading', {
//   render: function (createElement) {
//     return createElement(
//       'h' + this.level,   // tag name 标签名称
//       {
//         'class': {
//             foo: true,
//             bar: false
//         },
//         style: {
//            // color: 'red',
//            // fontSize: '14px'
//         },

//         // 正常的 HTML 特性
//         attrs: {
//           id: 'foo'
//         },
//         // 组件 props
//         props: {
//           myProp: 'bar'
//         },
//         // DOM 属性
//         domProps: {
//           innerHTML: 'baz'
//         },
//         on: {
//           click: function() {
//             alert("234234");
//           }
//         },


//       },
//       this.$slots.default // 子组件中的阵列
//     )
//   },
//   props: {
//     level: {
//       type: Number,
//       required: true
//     },
//     lev: {
//       type: Number,
//       required: true
//     }
//   },
// })

// Vue.component('anchored-heading', {
//   template: '#anchored-heading-template',
//   props: {
//     level: {
//       type: Number,
//       required: true
//     }
//   }
// })























////////////////////////////////////////////////////////////////////////
// new Vue({
//   el: '#animated-number-demo',
//   data: {
//     number: 0,
//     animatedNumber: 0
//   },
//   watch: {
//     number: function(newValue, oldValue) {
//       var vm = this
//       function animate (time) {
//         requestAnimationFrame(animate)
//         TWEEN.update(time)
//       }
//       new TWEEN.Tween({ tweeningNumber: oldValue })
//         .easing(TWEEN.Easing.Quadratic.Out)
//         .to({ tweeningNumber: newValue }, 500)
//         .onUpdate(function () {
//           vm.animatedNumber = this.tweeningNumber.toFixed(0)
//         })
//         .start()
//       animate()
//     }
//   }
// })









// new Vue({
//   el: '#staggered-list-demo',
//   data: {
//     query: '',
//     list: [
//       { msg: 'Bruce Lee' },
//       { msg: 'Jackie Chan' },
//       { msg: 'Chuck Norris' },
//       { msg: 'Jet Li' },
//       { msg: 'Kung Fury' }
//     ]
//   },
//   computed: {
//     computedList: function () {
//       var vm = this
//       console.log(vm);
//       return this.list.filter(function (item) {
//         return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
//       })
//     }
//   },
//   methods: {
//     beforeEnter: function (el) {
//       console.log('beforeEnter');
//       el.style.opacity = 0
//       el.style.height = 0
//     },
//     enter: function (el, done) {
//       console.log('enter');
//       var delay = el.dataset.index * 150
//       setTimeout(function () {
//         Velocity(
//           el,
//           { opacity: 1, height: '1.6em' },
//           { complete: done }
//         )
//       }, delay)
//     },
//     leave: function (el, done) {
//       console.log('leave');
//       var delay = el.dataset.index * 150
//       setTimeout(function () {
//         Velocity(
//           el,
//           { opacity: 0, height: 0 },
//           { complete: done }
//         )
//       }, delay)
//     }
//   }
// })





// new Vue({
//   el: '#list-complete-demo',
//   data: {
//     items: [1,2,3,4,5,6,7,8,9],
//     nextNum: 10
//   },
//   methods: {
//     randomIndex: function () {
//       return Math.floor(Math.random() * this.items.length)
//     },
//     add: function () {
//       this.items.splice(this.randomIndex(), 0, this.nextNum++)
//     },
//     remove: function () {
//       this.items.splice(this.randomIndex(), 1)
//     },
//     shuffle: function () {
//       this.items = _.shuffle(this.items)
//     }
//   }
// })




// new Vue({
//   el: '#flip-list-demo',
//   data: {
//     items: [1,2,3,4,5,6,7,8,9]
//   },
//   methods: {
//     shuffle: function () {
//       this.items = _.shuffle(this.items)
//     }
//   }
// })







// new Vue({
//   el: '#list-demo',
//   data: {
//     items: [1,2,3,4,5,6,7,8,9],
//     nextNum: 10
//   },
//   methods: {
//     randomIndex: function () {
//       return Math.floor(Math.random() * this.items.length)
//     },
//     add: function () {
//       console.log(this.randomIndex());
//       this.items.splice(this.randomIndex(), 0, this.nextNum++)
//     },
//     remove: function () {
//       this.items.splice(this.randomIndex(), 1)
//     },
//   }
// })






// new Vue({
//   el: '#example-4',
//   data: {
//     show: true
//   },
//   methods: {
//     beforeEnter: function (el) {
//       el.style.opacity = 0
//       el.style.transformOrigin = 'left'
//     },
//     enter: function (el, done) {
//       Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
//       Velocity(el, { fontSize: '1em' }, { complete: done })
//     },
//     leave: function (el, done) {
//       Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
//       Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
//       Velocity(el, {
//         rotateZ: '45deg',
//         translateY: '30px',
//         translateX: '30px',
//         opacity: 0
//       }, { complete: done })
//     }
//   }
// })






// new Vue({
//   el: '#example-3',
//   data: {
//     show: true
//   },
//   // ...
//   methods: {
//     // --------
//     // 进入中
//     // --------

//     beforeEnter: function (el) {
//       // ...
//       console.log('beforeEnter');
//     },
//     // 此回调函数是可选项的设置
//     // 与 CSS 结合时使用
//     enter: function (el, done) {
//       // ...
//       console.log('enter');
//     },
//     afterEnter: function (el) {
//       // ...
//       console.log('afterEnter');
//     },
//     enterCancelled: function (el) {
//       // ...
//       console.log('enterCancelled');
//     },

//     // --------
//     // 离开时
//     // --------

//     beforeLeave: function (el) {
//       // ...
//       console.log('beforeLeave');
//     },
//     // 此回调函数是可选项的设置
//     // 与 CSS 结合时使用
//     leave: function (el, done) {
//       // ...
//       console.log('leave');
//     },
//     afterLeave: function (el) {
//       // ...
//       console.log('afterLeave');
//     },
//     // leaveCancelled 只用于 v-show 中
//     leaveCancelled: function (el) {
//       // ...
//       console.log('leaveCancelled');
//     }
//   }
// })







// new Vue({
//   el: '#example-2',
//   data: {
//     show: true
//   }
// })



// new Vue({
//   el: '#example-1',
//   data: {
//     show: true
//   }
// })



// new Vue({
//   el: '#demo',
//   data: {
//     show: true
//   }
// })





// // 注册
// Vue.component('my-component', {
//   template: '<div v-on:click="updateMessage()">A custom {{message}}!</div>',
//   data: function () {
//     return {
//       message: 'not updated'
//     }
//   },
//   methods: {
//     updateMessage: function () {
//       this.message = 'updated'
//       console.log(this.$el) // => '没有更新'
//       this.$nextTick(function () {
//         console.log(this.$el) // => '更新完成'
//       })
//     }
//   }
// })
// // 创建根实例
// new Vue({
//   el: '#example'
// })





// Vue.component("example", {
//   props: ['todo'],
//   template: '<li>{{ todo }}</li>'
// });

// var qwe = new Vue( {
//   el: '#qwe',
//   data: {
//     massage: '234234'
//   }
// })



// Vue.component('todo-item1', {
//   template: '<li>这是个待办项</li>'
// })

// var qwe = new Vue({
//   el: '#qwe'
// })


// Vue.component('todo-item', {
//   props: ['todo'],
//   template: '<li>{{ todo.text }}</li>'
// })

// var app7 = new Vue({
//   el: '#app-7',
//   data: {
//     groceryList: [
//       { text: '蔬菜' },
//       { text: '奶酪' },
//       { text: '随便其他什么人吃的东西' }
//     ]
//   }
// })


// Vue.component('example', {
//   template: '<span>asdas</span>'
// });

// Vue.component('example', {
//   template: '<span>{{ message }}</span>',
//   data: function () {
//     return {
//       message: 'not updated'
//     }
//   },
//   methods: {
//     updateMessage: function () {
//       this.message = 'updated'
//       console.log(this.$el.textContent) // => '没有更新'
//       this.$nextTick(function () {
//         console.log(this.$el.textContent) // => '更新完成'
//       })
//     }
//   }
// })




// var vm = new Vue({
//   el: '#example',
//   data: {
//     message: '123'
//   }
// })
// vm.message = 'new message' // 更改数据
//  // false
// console.log(vm.$el.textContent);
// Vue.nextTick(function () {
//   // true
//   console.log(vm.$el.textContent);
// })







// new Vue({
//   el: '#example-3',
//   data: {
//     message: '',
//     message1: '',
//     checkedNames: [],
//     picked: '',
//     selected: '',
//     qwe: 'A',
//     options: [
//       { text: 'One', value: 'A' },
//       { text: 'Two', value: 'B' },
//       { text: 'Three', value: 'C' }
//     ]
//   },
//   methods: {
//     say: function (message) {
//       alert(message)
//     }, 
//     doThis: function () {
//       alert('doThis');
//     },
//     submit: function() {
//       alert("submit");
//     }
//   }
// })




// var example2 = new Vue({
//   el: '#example-2',
//   data: {
//     name: 'Vue.js'
//   },
//   // 在 `methods` 对象中定义方法
//   methods: {
//     greet: function (event) {
//       // `this` 在方法里指当前 Vue 实例
//       alert('Hello ' + this.name + '!')
//       // `event` 是原生 DOM 事件

//       console.log(event);

//       if (event) {
//         alert(event.target.tagName)
//       }
//     }
//   }
// })

// 也可以用 JavaScript 直接调用方法
// example2.greet() // -> 'Hello Vue.js!'





// new Vue({
//   el: '#example-1',
//   data: {
//     counter: 0
//   },
//   methods: {
//       add: function(value) {
//       this.counter += 1;
//     }
//   }

// })



 
// Vue.component('todo-item', {
//   template: '\
//     <li>\
//       {{ title }}\
//       <button v-on:click="$emit(\'remove\')">X</button>\
//     </li>\
//   ',
//   props: ['title']
// })

// new Vue({
//   el: '#todo-list-example',
//   data: {
//     newTodoText: '',
//     todos: [
//       'Do the dishes',
//       'Take out the trash',
//       'Mow the lawn'
//     ]
//   },
//   methods: {
//     addNewTodo: function () {
//       this.todos.push(this.newTodoText)
//       this.newTodoText = ''
//     }
//   }
// })

//////////////////////////////////////////////////////////////////////////  
/*

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      rawHtml: '<hr>'
    }
  })

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: 'You loaded this page on ' + new Date()
    }
  })

  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })

  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  })

  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!@@@'
    }
  })

  // Define a new component called todo-item
  Vue.component('todo-item1', {
    template: '<p>This is a todo</p>'
  })



  Vue.component('todo-item', {
    props: ['todow'],
    template: '<li>{{ todow.text }} <p>12312</p></li>'
  })

  var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { text: 'Vegetables' },
        { text: 'Cheese' },
        { text: 'Whatever else humans are supposed to eat' }
      ]
    }
  })


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    },
    now: function () {
      return Date.now()
    }
  },
  methods: {
    reverseMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})



// var vm = new Vue({
//   el: '#demo',
//   data: {
//     firstName: 'Foo',
//     lastName: 'Bar',
//     fullName: 'Foo Bar'
//   },
//   watch: {
//     firstName: function (val) {
//       this.fullName = val + ' ' + this.lastName
//     },
//     lastName: function (val) {
//       this.fullName = this.firstName + ' ' + val
//     }
//   }
// })
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  // computed: {
  //   fullName: function () {
  //     return this.firstName + ' ' + this.lastName
  //   }
  // }
  computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})
// vm.fullName = 'zhang guangde' 



var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 question 发生改变，这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce 是一个通过 lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
    // ajax请求直到用户输入完毕才会发出
    // 学习更多关于 _.debounce function (and its cousin
    // _.throttle), 参考: https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        var vm = this
        if (this.question.indexOf('?') === -1) {
          vm.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        vm.answer = 'Thinking...'
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // 这是我们为用户停止输入等待的毫秒数
      500
    )
  }
})


var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
})


var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})
*/